<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Video.js 6.2.8</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcss.com/video.js/6.7.4/alt/video-js-cdn.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/video.js/6.7.4/video.min.js"></script>
    <link href="css/video-js.css" rel="stylesheet">
    <style>
        .m {
            margin-left: auto;
            margin-right: auto;
            display: flex;
            justify-content: center;
        }

    </style>
</head>

<body>
    <div class="m">
        <video id="my-video" class="video-js" controls preload="auto" poster="http://assets.jq22.com/plugin/2015-08-25-23-08-04.jpg"
            data-setup="{}">
            <source src="http://jq22com.qiniudn.com/jq22-sp.mp4" type="video/mp4">
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
            </p>
        </video>
    </div>
    <script src="js/video.min.js"></script>
    <script type="text/javascript">
        var win = document.body;
        var myPlayer = videojs('my-video', { fluid: true });
        //设置宽度
        myPlayer.width(win.clientWidth*.9);
        // myPlayer.size(640,480);
        videojs("my-video").ready(function () {
            var myPlayer = this;
            // myPlayer.play();
        });
    </script>

</body>

</html>